<template>
	<view>
		<cu-custom :isBack="true" :bgColor="'bg-'+ theme.themeColor">
			<block slot="backText">返回</block>
			<block slot="content">商品搜索</block>
		</cu-custom>
		<view class="cu-bar search bg-white" :class="'bg-'+ theme.themeColor">
			<view class="search-form round">
				<text class="cuIcon-search"></text>
				<input :adjust-position="false" type="text" v-model="searchKeyword" placeholder="搜索商品"
					confirm-type="search"></input>
				<button class="cu-btn round sm margin-xs" :class="'bg-'+ theme.themeColor"
					@tap="doSearch(searchKeyword)">搜索</button>
			</view>
		</view>
		<view class="bg-white" v-if="searchHistoryList.length>0">
			<view class="flex justify-between align-center padding">
				<view>
					搜索历史
				</view>
				<view>
					<text class="cuIcon-deletefill" @tap="delAll"></text>
				</view>
			</view>
			<view class="flex flex-wrap align-center">
				<view v-for="(item,index) in searchHistoryList" class="padding-left-sm padding-bottom-sm">
					<view class='cu-tag round' @tap="doSearch(item)">{{item}}</view>
				</view>
			</view>
		</view>
		<view class="cu-bar justify-center  margin-top-sm">
			<view class="action text-bold" :class="'text-'+theme.themeColor">
				<text class="cuIcon-move"></text> <text class="cuIcon-appreciate"></text>为您推荐<text
					class="cuIcon-move"></text>
			</view>
		</view>
		<goods-list :goodsList="goodsSpuList"></goods-list>
	</view>
</template>

<script>
	import {
		getPage as goodsSpuPage,
		getById as goodsSpuById
	} from '@/api/goodsspu.js';
	import GoodsList from "components/goods-list/col-list/index";
	export default {
		components: {
			GoodsList
		},
		data() {
			return {
				theme: getApp().globalData.theme,
				searchHistoryList: uni.getStorageSync('search-history') ? uni.getStorageSync('search-history') : [],
				searchKeyword: '',
				goodsSpuList: []
			}
		},
		onLoad() {
			this.getGoodsList();
		},
		methods: {
			// 搜索
			doSearch(name) {
				if (name) {
					this.searchKeyword = name;
					//过滤重复搜索
					this.searchHistoryList = this.searchHistoryList.filter(v => v != name);
					// 数组头部插入
					this.searchHistoryList.unshift(name);
					//缓存搜索记录
					uni.setStorageSync('search-history', this.searchHistoryList);
				}
				// 跳转商品列表
				uni.navigateTo({
					url: '/pages/goods/goods-list/index?searchKeyword=' + this.searchKeyword
				})
			},
			// 删除全部搜索记录
			delAll() {
				uni.removeStorageSync('search-history');
				this.searchHistoryList = [];
			},
			// 查询推荐商品列表
			getGoodsList() {
				goodsSpuPage({
					current: 1,
					size: 10,
					descs: 'sales_volume'
				}).then(res => {
					this.goodsSpuList = res.data.records;
				});
			},
		}
	}
</script>

<style>
</style>
